<template>
  <div>
    <RadioGroup v-model="type" @on-change="initial" >
        <Radio class="ivu-mr-16" :label="1"><span>图片</span></Radio>
        <Radio :label="2"><span>视频</span></Radio>
    </RadioGroup>
    <div v-if="type == 1">
        <Scroll v-if="dataimg.length" :on-reach-bottom="handleReachBottomimg" :height="height" :distance-to-edge="[1,1]">
            <Row :gutter="8" type="flex">
                <template v-for="(item,index) in dataimg">
                    <Col :key="item.id">
                        <cardImage @imgdel="imgdel" :bool="true" :data="item" :index="index"/>
                    </Col>
                </template>
            </Row>
            <div v-if="Message " style="display: flex;align-items: center;justify-content: center;color: #aaa;">被你看完了</div>
        </Scroll>
        <div v-else style="height:300px;display: flex;align-items: center;justify-content: center;color: #aaa;">暂无数据</div>
    </div>
    <div v-if="type == 2">
        <Scroll v-if="datavideo.length" :on-reach-bottom="handleReachBottomvideo" :height="height" :distance-to-edge="[1,1]">
            <Row :gutter="8" type="flex">
                <template v-for="(item,index) in datavideo">
                    <Col :key="item.id">
                        <cardvideo @videodel="videodel" :bool="true" :data="item" :index="index"/>
                    </Col>
                </template>
            </Row>
            <div v-if="Message " style="display: flex;align-items: center;justify-content: center;color: #aaa;">被你看完了</div>
        </Scroll>
        <div v-else style="height:300px;display: flex;align-items: center;justify-content: center;color: #aaa;">暂无数据</div>
    </div>
  </div>
</template>
<script>
    import { getrecycleList } from '@/api/myuplod.js'
    import cardImage from './cardImage.vue'
    import cardvideo from './cardvideo.vue'
    import { rbacmenumenuclick  } from '@api/menuclick';
    export default {
        props: {
            remark: String
        },
        components: { cardImage, cardvideo },
        data () {
            return {
                Message: false,
                type:1,
                height: null,
                paramsimg: { remark: '', page: 1, pageSize: 24, type: 1 },
                paramsvideo: { remark: '', page: 1, pageSize: 24, type: 2 },
                dataimg: [],
                datavideo: [],
                totalimg: null,
                totalvideo: null
            }
        },
        mounted () {
             this.height = document.documentElement.clientHeight - 320
        },
        methods: {
            initial() {
                if (this.type == 1) {
                    this.paramsimg.page = 1
                    this.askDataimg()
                } else {
                    this.paramsvideo.page = 1
                    this.askDatavideo()
                }
                this.rbacmenumenuclick()
            },
            rbacmenumenuclick(){
                let params={
                    menu_name:'素材库',
                    module_name:'回收站'
                }
                rbacmenumenuclick(params).then(() => {}).catch(() => {})
            },
            askDataimg() {
                this.paramsimg.remark = this.remark
                this.Message = false
                getrecycleList(this.paramsimg).then(res => {
                    this.dataimg = res.list
                    this.totalimg = res.totalimg
                })
            },
            askDatavideo() {
                this.paramsvideo.remark = this.remark
                this.Message = false
                getrecycleList(this.paramsvideo).then(res => {
                    this.datavideo = res.list
                    this.totalvideo = res.totalimg
                })
            },
            askDataimgs() {
                this.paramsimg.remark = this.remark
                getrecycleList(this.paramsimg).then(res => {
                    this.dataimg.push(...res.list)
                })
            },
            askDatavideos() {
                this.paramsvideo.remark = this.remark
                getrecycleList(this.paramsvideo).then(res => {
                    this.datavideo.push(...res.list)
                })
            },
            imgdel(index) {
                this.dataimg.splice(index, 1)
            },
            videodel(index) {
                this.datavideo.splice(index, 1)
            },
            handleReachBottomimg() {
                if (this.totalimg > this.paramsimg.pageSize * this.paramsimg.page) {
                    this.paramsimg.page++
                    this.askDataimgs()
                } else {
                   this.Message = true
                }
            },
            handleReachBottomvideo() {
                if (this.totalvideo > this.paramsvideo.pageSize * this.paramsvideo.page) {
                    this.paramsvideo.page++
                    this.askDatavideos()
                } else {
                   this.Message = true
                }
            },
        }
    }
</script>
<style lang="less" scoped>
.imageurl{
    width: 100%;
    height: 250px;
    .canvasImg{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
</style>
